<template>
  <div class="businList-wrapper">
    <el-dialog class="tableDialog" width="800px" title="编辑业务逻辑控制" :visible.sync="businvisible">
      <div>
        <section class="model-name">
          <span>{{modelName}}</span>
        </section>
        <section class="model-describe">
          描述：{{modelDescribes}}
        </section>
      </div>
      <el-tabs v-model="activeName">
        <el-tab-pane :label="groupArry[index]" :name="group.groupName" v-for="(group, index) in tableData" :key="index">

          <div class="implement-table">
            <el-table size="mini" v-loading="loading" :data="group.list.list" style=" margin-top: 20px" border
                      :header-cell-style="{
        'background-color': '#eeeeee !important',
      }" :row-class-name="tableRowClassName"
                      @sort-change="sortthiscolumn">
              <el-table-column type="index" label="序号" width="70" align="center">
                <template slot-scope="scope">
              <span>{{
            (page.pageNo - 1) * page.pageSize + scope.$index + 1
          }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="codes" label="控制项编号" width="120">
              </el-table-column>
              <el-table-column prop="names" label="控制项名称" width="120">
              </el-table-column>
              <el-table-column prop="svalue" label="值" width="80">
              </el-table-column>
              <el-table-column label="说明">
              </el-table-column>
              <el-table-column prop="valueSource" label="值来源">
                <template slot-scope="scope">
                  <span v-if="scope.row.valueSource === 1">全局</span>
                  <span v-if="scope.row.valueSource === 2">流程</span>
                  <span v-if="scope.row.valueSource === 3">模型</span>
                  <span v-if="scope.row.valueSource === 4">业务</span>
                  <span v-if="scope.row.valueSource === 5">其他</span>
                </template>
            </el-table-column>
<!--              <el-table-column prop="callMethod" label="调用方法">-->
<!--              </el-table-column>-->
<!--              <el-table-column prop="expression" label="计算机表达式" width="120">-->
<!--              </el-table-column>-->
<!--              <el-table-column prop="isDisplay" label="显示">-->
<!--                <template slot-scope="scope">-->
<!--                  <el-checkbox v-model="scope.row.isDisplay" :true-label="1" :false-label="0" disabled></el-checkbox>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column prop="sgroup" label="变量分组">-->
<!--                <template slot-scope="scope">-->
<!--                  {{$dictUtils.getDictLabel("varGroup", scope.row.sgroup, "")}}-->
<!--                </template>-->
<!--              </el-table-column>-->
              <!-- <el-table-column prop="tipToUser" label="给用户的提示">
          </el-table-column> -->
              <span v-for="(item,index) in checkedProps" :key="index">
            <el-table-column prop="createDate" :label="item" v-if="item==='创建时间'"></el-table-column>
            <el-table-column prop="updateDate" :label="item" v-if="item==='上次操作时间'"></el-table-column>

          </span>
              <el-table-column prop="address" label="操作" width="122">
                <template slot-scope="scope">
                  <span style="padding-right: 6px"></span>
                  <el-link type="primary" :underline="false" v-if="hasPermission('model:busin:edit')" @click="edit(scope.row)">修改
                  </el-link>
                  <el-link type="primary" :underline="false" v-if="hasPermission('model:busin:del')" @click="del(scope.row.id)">删除
                  </el-link>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination background @current-change="handleCurrentChange($event, index)" :page-size="page.pageSize" :current-page="page.pageNo"
                           layout="total, prev, pager, next" :total="page.total">
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>

    </el-dialog>
    <businFrom ref="businFrom" @refreshDataList="refreshList(page, '')"></businFrom>
  </div>
</template>
<script>
  import businFrom from './businFrom'
  import PopoverBut from '@/components/button/popoverBut'
  const options1 = []
  export default {
    components: {
      businFrom,
      PopoverBut
    },
    data () {
      return {
        activeName: '1',
        businvisible: false,
        checkedProps: options1,
        ShowCloum: {
          createDate: ''
        },
        options: [{
          label: '上次操作时间',
          key: '2'
        }, {
          label: '创建时间',
          key: 'createDate'
        }],
        queryForm: {
          selectValue: '',
          modelId: ''
        },
        modelId: '',
        modelName: '',
        modelDescribes: '',
        page: {
          pageSize: 10,
          pageNo: 1,
          total: 0
        },
        tableData: [{
          tipCode: '11',
          list:[{
            list:[]
          }]
        }],
        groupArry: [],
        activeNames: [],
        loading: false
      }
    },
    methods: {
      init (method, obj) {
        if (method === 'list') {
          console.log(obj)
          this.businvisible = true
          this.queryForm.modelId = obj.id
          this.modelId = obj.id
          this.modelName = obj.names
          this.modelDescribes = obj.describes
          this.refreshList(this.page)
          console.log(obj)
        }
      },
      // 获取数据列表
      refreshList (params, selectValue) {
        this.loading = true
        this.$http({
          url: '/model/businList',
          method: 'get',
          params: {
            'pageNo': params.pageNo,
            'pageSize': params.pageSize,
            'selectValue': selectValue,
            'modelId': this.modelId
          }
        }).then(({
          data
        }) => {
          if (data.code === '200') {
            this.tableData = data.result
            console.log(data.result)
            console.log(this.tableData)
            this.page.total = data.result[0].list.count
            // 分组单独存放
            this.groupArry = []
            data.result.forEach((item) => {
              const name = this.$dictUtils.getDictLabel('varGroup', item.groupName, '')
              console.log(name)
              this.groupArry.push(name)
            })
            this.loading = false
          }
        })
      },
      // 改变分组
      changeCollapse (activeNames) {
        this.activeNames = activeNames
      },
      edit (row) {
        this.$refs.businFrom.init('edit', row)
      },
      add () {
        this.$refs.businFrom.init('add')
      },
      del (id) {
        let ids = id || this.dataListSelections.map(item => {
          return item.id
        }).join(',')
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          this.loading = true
          this.$http({
            url: '/model/busin/delete',
            method: 'delete',
            params: {
              'ids': ids
            }
          }).then(({
            data
          }) => {
            if (data && data.success) {
              this.$message.success(data.message)
              this.refreshList(this.page, 'tipCode', 'asc')
            }
            this.loading = false
          })
        })
      },
      // 排序
      sortthiscolumn (a) {
        console.log(a)
        this.orderBy.name = a.prop
        this.page.pageNo = 1
        if (a.order === 'ascending') {
          this.orderBy.method = 'asc'
        } else {
          this.orderBy.method = 'desc'
        }
        this.refreshList(this.page, this.orderBy.name, this.orderBy.method)
      },
      // 是否显示某列数据
      handlerCloumn (e) {
        this.checkedProps = e
        // console.log(e)
      },
      handleCurrentChange (e, index) {
        this.page.pageNo = e
        this.refreshList(this.page, '')
      },
      tableRowClassName ({
        row,
        rowIndex
      }) {
        if (rowIndex % 2 === 1) {
          return 'warning-row'
        } else {
          return 'success-row'
        }
      }

    }
  }
</script>
<style lang="scss" scoped>
  .businList-wrapper{
    ::v-deep.el-dialog{
      width: fit-content;
      .el-dialog__header{
        padding: 0 20px !important;
        height: 41px;
        line-height: 41px;
      }
      .el-dialog__headerbtn{
        top: 11px;
      }
      .el-dialog__title{
        font-size: 16px;
        color: #333333;
      }
    }
  }
  ::v-deep .el-input--small .el-input__inner {
    height: 36px;
    line-height: 32px;
    width: 230px;
  }

  .queryForm {
    position: relative;

    .but-container {
      top: 20px;
      margin-left: 35px;
    }
  }

  .right-but {
    float: right;
    margin-right: 10px;
    margin-top: -20px;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  ::v-deep .el-table .warning-row {
    background: #f7f7f7;
  }
  .model-name{
    margin-bottom: 10px;
    span{
      display: inline-block;
      padding: 5px 10px;
      border:1px solid #1890ff;
      color: #1890ff;
      border-radius: 4px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
    }
  }
  .model-describe{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #999999;
      line-height: 18px;
  }
</style>
